<template>
  <div class="interview-container">
    <div class="page-header">
      <h1 class="page-title">面试配置</h1>
    </div>

    <div class="config-body">
      <section class="card-group">
        <h2 class="section-title">面试官类型选择</h2>
        <div class="type-grid">
          <div
            v-for="item in interviewerTypes"
            :key="item.value"
            class="type-card"
            :class="{ active: form.interviewerType === item.value }"
            @click="form.interviewerType = item.value"
          >
            <div class="type-title">{{ item.label }}</div>
            <div class="type-desc">{{ item.desc }}</div>
          </div>
        </div>
      </section>

      <section class="card-group">
        <h2 class="section-title">面试题类型选择</h2>
        <div class="topic-grid">
          <label
            v-for="topic in topicOptions"
            :key="topic.value"
            class="topic-item"
          >
            <input
              type="checkbox"
              :value="topic.value"
              v-model="form.topics"
            />
            <span>{{ topic.label }}</span>
          </label>
        </div>
      </section>

      <section class="card-group">
        <h2 class="section-title">面试题数量设置</h2>
        <div class="slider-row">
          <div class="slider-title">八股文数量设置</div>
          <div class="slider">
            <span class="min">1</span>
            <input
              type="range"
              min="1"
              max="15"
              v-model.number="form.classicCount"
            />
            <span class="max">15</span>
          </div>
          <div class="value">{{ form.classicCount }}</div>
        </div>

        <div class="slider-row">
          <div class="slider-title">项目挖掘问题设置</div>
          <div class="slider">
            <span class="min">1</span>
            <input
              type="range"
              min="1"
              max="5"
              v-model.number="form.projectCount"
            />
            <span class="max">5</span>
          </div>
          <div class="value">{{ form.projectCount }}</div>
        </div>
      </section>

      <div class="action-row">
        <button class="primary-btn" @click="startInterview">开始面试</button>
        <button class="ghost-btn" @click="goBack">退出配置</button>
      </div>
    </div>
  </div>
  
</template>

<script>
export default {
  name: 'Interview',
  data() {
    return {
      interviewerTypes: [
        { value: 'pressure', label: '压力面', desc: '模拟高压环境，通过挑战性、连环追问、沉默、质疑和快速节奏来测试候选人的应变能力、抗压能力和知识深度。' },
        { value: 'gentle', label: '温柔面', desc: '通过鼓励、引导和积极反馈，让候选人能够充分展示自己，考察其真实潜力和协作能力。' },
        { value: 'kpi', label: 'KPI面', desc: '模拟完成任务式的面试，问题流于表面、节奏快、缺乏深度互动，旨在快速走完流程。' },
        { value: 'normal', label: '普通面', desc: '标准专业面试。对方是一位专业、客观、理性的面试官。' }
      ],
      topicOptions: [
        { value: 'java', label: 'Java基础' },
        { value: 'mysql', label: 'MySQL数据库' },
        { value: 'redis', label: 'Redis' },
        { value: 'spring', label: 'Spring' },
        { value: 'mq', label: '消息队列' },
        { value: 'juc', label: 'JUC' },
        { value: 'jvm', label: 'JVM' },
        { value: 'os', label: '操作系统' },
        { value: 'network', label: '计算机网络' }
      ],
      form: {
        interviewerType: 'normal',
        topics: ['java'],
        classicCount: null,
        projectCount: null
      }
    }
  },
  methods: {
    goBack() {
      this.$router.push('/')
    },
    startInterview() {
      if (!this.form.topics || this.form.topics.length === 0) {
        window.alert('请至少选择一种面试题类型');
        return;
      }
      const config = {
        interviewerType: this.form.interviewerType,
        topics: this.form.topics,
        classicCount: this.form.classicCount,
        projectCount: this.form.projectCount
      }
      console.log('开始面试配置：', config)
      // 跳转到面试对话页并传参
      this.$router.push({ path: '/mock-interview/chat', query: { config: JSON.stringify(config) } })
    }
  }
}
</script>

<style scoped>
.interview-container {
  min-height: 100vh;
  background: #010e50 url(@/assets/images/bg.jpg) center top no-repeat;
  background-size: 100% auto;
  color: #fff;
  padding: 24px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.page-title {
  font-size: 32px;
  font-weight: 700;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.config-body {
  background: rgba(0, 35, 120, 0.36);
  border: 1px solid rgba(100, 162, 255, 0.2);
  border-radius: 12px;
  padding: 24px;
  position: relative;
}

.config-body:before,
.config-body:after {
  position: absolute;
  content: "";
  width: 20px;
  height: 30px;
}

.config-body:before {
  border-left: 1px solid #0258f0;
  border-top: 1px solid #0258f0;
  left: -1px;
  top: -1px;
}

.config-body:after {
  border-right: 1px solid #0258f0;
  border-bottom: 1px solid #0258f0;
  right: -1px;
  bottom: -1px;
}

.section-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(2, 88, 240, 0.4);
}

.card-group {
  margin-bottom: 24px;
}

.type-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.type-card {
  background: rgba(0, 35, 120, 0.36);
  border: 1px solid rgba(100, 162, 255, 0.2);
  border-radius: 10px;
  padding: 18px 16px;
  cursor: pointer;
  transition: all .2s ease;
  color: #fff;
}

.type-card:hover {
  background: rgba(2, 88, 240, 0.3);
  border-color: rgba(100, 162, 255, 0.6);
  transform: translateY(-2px);
}

.type-card.active {
  border-color: #64a2ff;
  box-shadow: 0 8px 20px rgba(2,88,240,.25);
  background: rgba(2, 88, 240, 0.25);
}

.type-title {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  text-align: center;
}

.type-desc {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.6;
  color: rgba(255,255,255,0.85);
}

.topic-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px 18px;
}

.topic-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(0, 35, 120, 0.36);
  border: 1px solid rgba(100, 162, 255, 0.2);
  border-radius: 8px;
  user-select: none;
}

.topic-item input[type="checkbox"] {
  width: 16px;
  height: 16px;
}

.slider-row {
  display: grid;
  grid-template-columns: 160px 1fr 60px;
  align-items: center;
  gap: 14px;
  padding: 10px 0;
}

.slider-title {
  color: rgba(255,255,255,0.95);
  font-weight: 600;
}

.slider {
  display: grid;
  grid-template-columns: 30px 1fr 30px;
  gap: 10px;
  align-items: center;
}

.slider input[type="range"] {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
}

.slider .min, .slider .max { color: rgba(255,255,255,0.7); font-size: 12px; }

/* WebKit */
.slider input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  background: rgba(0, 35, 120, 0.5);
  border: 1px solid rgba(100, 162, 255, 0.4);
  border-radius: 4px;
}

.slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  margin-top: -7px; /* center thumb on track */
  border-radius: 50%;
  background: #64a2ff;
  border: 2px solid #ffffff;
  box-shadow: 0 0 0 4px rgba(100, 162, 255, 0.2);
  cursor: pointer;
  transition: box-shadow .2s ease, transform .2s ease;
}

.slider input[type="range"]:hover::-webkit-slider-thumb {
  box-shadow: 0 0 0 6px rgba(100, 162, 255, 0.25);
}

.slider input[type="range"]:focus::-webkit-slider-thumb {
  transform: scale(1.05);
}

/* Firefox */
.slider input[type="range"]::-moz-range-track {
  height: 6px;
  background: rgba(0, 35, 120, 0.5);
  border: 1px solid rgba(100, 162, 255, 0.4);
  border-radius: 4px;
}

.slider input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #64a2ff;
  border: 2px solid #ffffff;
  box-shadow: 0 0 0 4px rgba(100, 162, 255, 0.2);
  cursor: pointer;
}

/* Edge */
.slider input[type="range"]::-ms-track {
  height: 6px;
  background: transparent;
  border-color: transparent;
  color: transparent;
}

.slider input[type="range"]::-ms-fill-lower,
.slider input[type="range"]::-ms-fill-upper {
  background: rgba(0, 35, 120, 0.5);
  border: 1px solid rgba(100, 162, 255, 0.4);
  border-radius: 4px;
}

.slider input[type="range"]::-ms-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #64a2ff;
  border: 2px solid #ffffff;
  box-shadow: 0 0 0 4px rgba(100, 162, 255, 0.2);
  cursor: pointer;
}

.value {
  text-align: right;
  color: #64a2ff;
}

.action-row {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 10px;
}

.primary-btn {
  padding: 10px 22px;
  background: linear-gradient(135deg, rgba(2, 88, 240, 0.5), rgba(0, 35, 120, 0.7));
  color: #fff;
  border: 1px solid rgba(100, 162, 255, 0.6);
  border-radius: 8px;
  cursor: pointer;
  transition: all .2s ease;
}

.primary-btn:hover {
  background: rgba(2, 88, 240, 0.8);
  box-shadow: 0 8px 16px rgba(2,88,240,.35);
  transform: translateY(-1px);
}

.ghost-btn {
  padding: 10px 22px;
  background: linear-gradient(135deg, rgba(2, 88, 240, 0.3), rgba(0, 35, 120, 0.5));
  border: 1px solid rgba(100, 162, 255, 0.4);
  color: #fff;
  border-radius: 8px;
  cursor: pointer;
  transition: all .2s ease;
}

.ghost-btn:hover {
  background: linear-gradient(135deg, rgba(2, 88, 240, 0.5), rgba(0, 35, 120, 0.7));
  border-color: #0258f0;
}

@media (max-width: 1024px) {
  .type-grid { grid-template-columns: repeat(2, 1fr); }
  .topic-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 640px) {
  .config-body { padding: 16px; }
  .slider-row { grid-template-columns: 1fr; }
  .topic-grid { grid-template-columns: repeat(2, 1fr); }
}
</style>
